<template>
  <div>
    <div class="layui-fluid" style="padding: 0px">
      <div class="layui-row" style="height: 300px;background-color: rgb(57, 47, 89)">
        <div class="layui-col-lg2 layui-col-lg-offset2">
          <div style="border: 2px solid white;margin-top: 20px">
            <img :src="cinema.picture[0].picture" alt="" style="width: 100%">
          </div>
        </div>
        <div class="layui-col-lg2" style="margin-left: 30px">
          <div class="layui-row" style="margin-top: 20px">
            <h1 style="color: white">{{cinema.cinema.movieTheatreName}}</h1>
          </div>
          <div class="layui-row" style="margin-top: 10px">
            <h4 style="color: white">{{cinema.cinema.movieTheatreAddress}}</h4>
          </div>
          <div class="layui-row" style="margin-top: 10px">
            <h4 style="color: white">电话:{{cinema.cinema.contactWay}}</h4>
          </div>
          <div class="layui-row" style="margin-top: 10px">
            <div style="float: left">
              <h4 style="color: white">影院服务</h4>
            </div>
            <div style="float: left;margin-left: 20px">
              <h4 style="color: white" v-for="(item,idx) in cinema.server">{{item.serve_content}}</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-container" style="margin-top: 20px">
      <div class="layui-row" style="height: 220px;overflow: auto;">
        <div class="layui-col-lg12" style="width:210px" id="cinemaImageDiv">
          <viewer>
            <img :src="item.picture" alt="" class="cinemaImage" v-for="(item,idx) in cinema.picture" :key="idx">
          </viewer>
        </div>
      </div>
      <div class="layui-row" style="margin-top: 30px">
        <div class="layui-col-lg12">
          <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
              <li class="layui-this" style="width: 30%">今天{{todayTime}}</li>
              <li style="width: 30%">明天{{tomorrow}}</li>
              <li style="width: 30%">后天{{afterDay}}</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <table class="layui-table" v-if="todayHall.length!=0">
                  <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                  </colgroup>
                  <thead>
                  <tr>
                    <th>厅名</th>
                    <th>片名</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>票价</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,idx) in todayHall" :key="idx">
                    <td>{{item.video_hall_name}}</td>
                    <td>{{selectMovieName}}</td>
                    <td>{{item.movie_start_time}}</td>
                    <td>{{item.movie_end_time}}</td>
                    <td>{{item.movie_ticket_price}}</td>
                    <td>
                      <button type="button" class="layui-btn layui-btn-danger"
                              @click="getChooseSeatPc(item.id,item.video_hall_id)">选座
                      </button>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <div style="text-align: left" v-if="todayHall.length==0">
                  <h3>暂无安排</h3>
                </div>
              </div>
              <div class="layui-tab-item">
                <table class="layui-table" v-if="tomorrowHall.length!=0">
                  <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                  </colgroup>
                  <thead>
                  <tr>
                    <th>厅名</th>
                    <th>片名</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>票价</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,idx) in tomorrowHall" :key="idx">
                    <td>{{item.video_hall_name}}</td>
                    <td>{{selectMovieName}}</td>
                    <td>{{item.movie_start_time}}</td>
                    <td>{{item.movie_end_time}}</td>
                    <td>{{item.movie_ticket_price}}</td>
                    <td>
                      <button type="button" class="layui-btn layui-btn-danger"
                              @click="getChooseSeatPc(item.id,item.video_hall_id)">选座
                      </button>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <div style="text-align: center" v-if="tomorrowHall.length==0">
                  <h3>暂无安排</h3>
                </div>
              </div>
              <div class="layui-tab-item">
                <table class="layui-table" v-if="afterDayHall.length!=0">
                  <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                  </colgroup>
                  <thead>
                  <tr>
                    <th>厅名</th>
                    <th>片名</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>票价</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,idx) in afterDayHall" :key="idx">
                    <td>{{item.video_hall_name}}</td>
                    <td>{{selectMovieName}}</td>
                    <td>{{item.movie_start_time}}</td>
                    <td>{{item.movie_end_time}}</td>
                    <td>{{item.movie_ticket_price}}</td>
                    <td>
                      <button type="button" class="layui-btn layui-btn-danger"
                              @click="getChooseSeatPc(item.id,item.video_hall_id)">选座
                      </button>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <div style="text-align: right" v-if="afterDayHall.length==0">
                  <h3>暂无安排</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div>
          <span style="color: #EE5C42;font-size: 20px">|</span>&nbsp;&nbsp;<span>学校评论</span>
        </div>
        <div style="margin-top: 10px" v-if="userCommentCinema.length!=0">
          <div style="border-bottom: 1px #E5E5E5 solid" v-for="(item,idx) in userCommentCinemaPaging" :key="idx">
            <div class="layui-row">
              <div class="layui-col-lg1">
                <div style="height: 40px;width: 40px;border-radius: 20px;border: 1px red solid;overflow: hidden">
                  <img :src="item.head_portrait" alt="" style="height: 100%;width: 100%">
                </div>
              </div>
              <div class="layui-col-lg3">
                <div>{{getUserName(item.telphone)}}</div>
                <div>
                  <el-rate :value="item.grade" disabled></el-rate>
                </div>
              </div>
            </div>
            <div class="layui-row">
              <div class="layui-col-lg10 layui-col-lg-offset1">
                {{item.comment_content}}
              </div>
            </div>
          </div>
          <div class="layui-row">
            <el-pagination
              background
              layout="prev, pager, next" :page-size="pagingPage" @current-change="currentChange"
              @prev-click="prevClick" @next-click="nextClick" :current-page="startPaging"
              :total="userCommentCinema.length">
            </el-pagination>
          </div>
        </div>
        <div style="margin-top: 10px" v-if="userCommentCinema.length==0">
          <div style="border-bottom: 1px #E5E5E5 solid">
            <div class="layui-row" style="text-align: center">
              <h1>暂无评论</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-row">
        <button @click="test">测试</button>
      </div>
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      width="60%"
      center>
      <div class="layui-fluid" style="margin-top: -40px">
        <div class="layui-row">
          <div class="layui-col-lg2 layui-col-lg-offset5"
               style="background-color: #C9C5C5;text-align: center;border-radius: 20px">
            <h3>屏幕</h3>
          </div>
        </div>
      </div>
      <div class="layui-fluid">
        <div class="layui-row" v-for="(row,idx) in seat" :key="idx" style="margin-top: 20px">
          <div class="layui-col-lg1">
            <h4>第{{idx+1}}排</h4>
          </div>
          <div class="layui-col-lg10 layui-col-lg-offset1">
            <div style="margin: 0px auto">
              <div v-for="(col,index) in row" :key="index" style="float: left;margin-left: 10px">
                <div v-if="col==1"
                     style="width: 20px;height: 20px;border: 1px #CD69C9 solid;text-align: center;line-height: 20px"
                     @click="selectSeat(idx,index,$event)">
                  <i class="layui-icon layui-icon-layer"></i>
                </div>
                <div v-if="col==2"
                     style="width: 20px;height: 20px;border: 1px #CD69C9 solid;text-align: center;line-height: 20px;background-color: red">
                  <i class="layui-icon layui-icon-layer"></i>
                </div>
                <div v-if="col==0" style="width: 20px;height: 20px">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="closeSelectSeat">取 消</el-button>
    <el-button type="primary" @click="confirmSeat">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "video_hall_page",
        data() {
            return {
                cinema: "",
                videoHall: [],
                doubanId: "",
                todayHall: [],
                tomorrowHall: [],
                afterDayHall: [],
                selectMovieName: "",
                seat: [],
                centerDialogVisible: false,
                selectSeatCount: [],
                mtId: "",
                vhId: "",
                userCommentCinema: [],
                userCommentCinemaPaging: [],
                startPaging: 1,
                pagingPage: 5
            }
        },
        methods: {
            test() {
                console.log(this.cinema)
            },
            getVideoHallPc() {
                this.cinema = JSON.parse(sessionStorage.getItem("selectCinema"))
                this.doubanId = JSON.parse(sessionStorage.getItem("selectDoubanId"))
                this.$axios.get('/api/tato/getVideoHallPc', {
                    params: {
                        cinema: this.cinema.cinema.id,
                        doubanId: this.doubanId
                    }
                }).then((res) => {
                    for (let i = 0; i < res.data.length; i++) {
                        this.videoHall.push(res.data[i])
                    }
                    this.changeCinemaImageDiv()
                    this.getTodayHall()
                    this.getTomorowHall()
                    this.getAfterHall()
                    this.getUserCommentCinemaPc()
                })
            },
            changeCinemaImageDiv() {
                let len = this.cinema.picture.length
                let width = (200 * len) + (10 * len)
                $("#cinemaImageDiv").css("width", width + "px");
            },
            getTodayHall() {
                let temp = []
                let startDate = null;
                for (let i = 0; i < this.videoHall.length; i++) {
                    let start = this.videoHall[i].movie_start_time
                    startDate = new Date(start)
                    if (startDate.getDay() == new Date().getDay()) {
                        temp.push(this.videoHall[i])
                    }
                }
                this.todayHall = temp
            },
            getTomorowHall() {
                let temp = []
                let startDate = null;
                for (let i = 0; i < this.videoHall.length; i++) {
                    let start = this.videoHall[i].movie_start_time
                    startDate = new Date(start)
                    var dd = new Date();
                    dd.setDate(dd.getDate() + 1);
                    if (startDate.getDay() == dd.getDay()) {
                        temp.push(this.videoHall[i])
                    }
                }
                this.tomorrowHall = temp
            },
            getAfterHall() {
                let temp = []
                let startDate = null;
                for (let i = 0; i < this.videoHall.length; i++) {
                    let start = this.videoHall[i].movie_start_time
                    startDate = new Date(start)
                    var dd = new Date();
                    dd.setDate(dd.getDate() + 2);
                    if (startDate.getDay() == dd.getDay()) {
                        temp.push(this.videoHall[i])
                    }
                }
                this.afterDayHall = temp
            },
            getChooseSeatPc(mtId, vhId) {
                this.seat = []
                this.mtId = mtId
                this.vhId = vhId
                this.$axios.get('/api/tato/getChooseSeatPc', {
                    params: {
                        mtId: mtId,
                        vhId: vhId
                    }
                }).then((res) => {
                    let temp = res.data.split(",")
                    for (let i = 0; i < temp.length; i++) {
                        let temp1 = temp[i].split("")
                        this.seat.push(temp1)
                    }
                    this.centerDialogVisible = true
                })
            },
            selectSeat(row, col, e) {
                for (let i = 0; i < this.selectSeatCount.length; i++) {
                    if (this.selectSeatCount[i].row == row && this.selectSeatCount[i].col == col) {
                        this.selectSeatCount.splice(i, 1)
                        $(e.target).css("background-color", "white")
                        return
                    }
                }
                if (this.selectSeatCount.length < 2) {
                    let temp = {
                        row: row,
                        col: col
                    }
                    this.selectSeatCount.push(temp)
                    $(e.target).css("background-color", "green")
                } else {
                    this.$message.error('一个人最多只能买两张票');
                }
            },
            closeSelectSeat() {
                this.selectSeatCount = []
                this.centerDialogVisible = false
            },
            confirmSeat() {
                this.$confirm('座位一旦选定将不可修改, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    //提交座位
                    this.updateSeat()
                }).catch(() => {

                });
            },
            updateSeat() {
                for (let i = 0; i < this.selectSeatCount.length; i++) {
                    this.seat[this.selectSeatCount[i].row][this.selectSeatCount[i].col] = "2"
                }
                let generalUser = JSON.parse(sessionStorage.getItem("generalUser"))
                let seatTemp = []
                for (let i = 0; i < this.seat.length; i++) {
                    seatTemp.push(this.seat[i].join(""))
                }
                let seatTemp2 = seatTemp.join(',')
                var params = new URLSearchParams();
                params.append('seat', seatTemp2);
                params.append('mtId', this.mtId);
                params.append('generalUserId', generalUser.id);
                params.append('selectSeatCount', JSON.stringify(this.selectSeatCount));
                //更改座位并且生成订单
                this.$axios.post('/api/tato/updateSeatPc', params).then((res) => {
                    if (res.data == 1) {
                        //提示成功
                        this.$message({
                            message: '订单生成成功',
                            type: 'success'
                        });
                        this.closeSelectSeat()
                    } else if (res.data == 2) {
                        //提示座位已更新
                        this.$message({
                            message: '座位已发生改变,请重新选着',
                            type: 'warning'
                        });
                        this.selectSeatCount = []
                        this.getChooseSeatPc(this.mtId, this.vhId)
                    } else if (res.data == 3) {
                        //提示已经超过两笔订单
                        this.$message.error('订单数超出最大限制');
                        this.centerDialogVisible = false
                    }
                })
            },
            getUserCommentCinemaPc() {
                this.$axios.get('/api/tato/getUserCommentCinemaPc', {
                    params: {
                        cinemaId: this.cinema.cinema.id
                    }
                }).then((res) => {
                    for (let i = 0; i < res.data.length; i++) {
                        this.userCommentCinema.push(res.data[i])
                    }
                    this.getUserCommentCinemaPaging()
                })
            },
            getUserCommentCinemaPaging() {
                this.userCommentCinemaPaging = []
                let start = (this.startPaging - 1) * this.pagingPage
                for (let i = start; i < start + this.pagingPage; i++) {
                    if (this.userCommentCinema[i] == undefined) {
                        break
                    } else {
                        this.userCommentCinemaPaging.push(this.userCommentCinema[i])
                    }
                }
            },
            currentChange(e) {
                this.startPaging = e
                this.getUserCommentCinemaPaging()
            },
            prevClick() {
                this.startPaging--
                this.getUserCommentCinemaPaging()
            },
            nextClick() {
                this.startPaging++
                this.getUserCommentCinemaPaging()
            },
            getUserName(date) {
                let temp = date.split('');
                temp.splice(4, 4, '****')
                let result = temp.join('')
                return result
            }
        },
        created() {
            let user = sessionStorage.getItem("generalUser")
            if (user == null) {
                this.$router.push({
                    name: "login_register_page"
                })
            } else {
                this.getVideoHallPc()
                this.selectMovieName = sessionStorage.getItem("selectMovieName")
            }
        },
        computed: {
            todayTime() {
                var today = new Date()
                var y = today.getFullYear();
                var m = today.getMonth() + 1;
                var d = today.getDate();
                return y + '-' + m + '-' + d
            },
            tomorrow() {
                var dd = new Date();
                dd.setDate(dd.getDate() + 1);
                var y = dd.getFullYear();
                var m = dd.getMonth() + 1;
                var d = dd.getDate();
                return y + "-" + m + "-" + d;
            },
            afterDay() {
                var dd = new Date();
                dd.setDate(dd.getDate() + 2);
                var y = dd.getFullYear();
                var m = dd.getMonth() + 1;
                var d = dd.getDate();
                return y + "-" + m + "-" + d;
            }
        }
    }
</script>

<style scoped>
  .cinemaImage {
    width: 200px;
    height: 200px;
    margin-left: 10px;
  }
</style>
